<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
         <acc-set-card></acc-set-card>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <vxe-toolbar>
                <template v-slot:buttons>
                    <el-button type="primary" icon="el-icon-folder-add" @click="goAdd">新增</el-button>
                    <el-button type="warning" icon="el-icon-edit" @click="goEdit">修改</el-button>
                    <!-- <el-button type="danger" icon="el-icon-delete" @click="delAllSelection">删除</el-button> -->
                </template>
            </vxe-toolbar>

            <div class="handler-box">
                <el-form label-width="100px" :model="query" ref="searchRuleForm">
                    <el-row>
                        <el-col :sm="20" :md="6">
                            <el-form-item label="单别代码" prop="ruleCode">
                                <el-input v-model="query.ruleCode" clearable></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="20" :md="6">
                            <el-form-item label="系统模块" prop="systemModel">
                                <el-select
                                    v-model="query.systemModel"
                                    placeholder="请选择"
                                    clearable
                                    @focus="getMoList"
                                >
                                    <el-option
                                        :label="item"
                                        :value="item"
                                        v-for="(item, index) in moList"
                                        :key="index"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="20" :md="6" align="center">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                @click="submitForm('searchRuleForm')"
                            >搜索</el-button>
                            <el-button type="info" @click="resetForm('searchRuleForm')">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <vxe-table
                border
                resizable
                keep-source
                highlight-hover-row
                highlight-hover-column
                ref="xTree"
                row-id="id"
                height="500"
                :loading="loading"
                :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                :data="tableData"
                @radio-change="currentChangeEvent"
            >
                <vxe-table-column type="radio" title width="60"></vxe-table-column>
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column field="ruleCode" title="单别代码"></vxe-table-column>
                <vxe-table-column field="ruleName" title="单别名称"></vxe-table-column>
                <vxe-table-column field="systemModel" title="系统模块"></vxe-table-column>
                <vxe-table-column field="task" title="作业"></vxe-table-column>
                <vxe-table-column field="noRule" title="单别规则"></vxe-table-column>
            </vxe-table>

            <vxe-pager
                background
                auto-hidden
                size="small"
                :loading="loading"
                :current-page="pagination.pageIndex"
                :page-size="pagination.pageSize"
                :total="pagination.pageTotal"
                :layouts="['PrevPage', 'JumpNumber','NextPage', 'Total']"
                @page-change="handlePageChange"
            ></vxe-pager>
        </div>

        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-form-item label="单别名称" prop="ruleName">
                    <el-input v-model="ruleForm.ruleName"></el-input>
                </el-form-item>
                <el-form-item label="系统模块" prop="systemModel">
                    <el-select
                        v-model="ruleForm.systemModel"
                        placeholder="请选择"
                        clearable
                        @focus="getMoList"
                    >
                        <el-option
                            :label="item"
                            :value="item"
                            v-for="(item, index) in moList"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="作业" prop="task">
                    <el-select
                        v-model="ruleForm.task"
                        placeholder="请选择"
                        clearable
                        @focus="getTaskList"
                    >
                        <el-option
                            :label="item"
                            :value="item"
                            v-for="(item, index) in taskList"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="dialogVisibleEdit" width="30%">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="120px">
                <el-form-item label="单别名称" prop="ruleName">
                    <el-input v-model="editForm.ruleName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import appMain from '../../../utils/app_main';
import _ from 'lodash';
import XEUtils from 'xe-utils';

export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            tableData: [
                {
                    id: 'anim ut sint', //
                    noRule: 'c', //单别规则
                    ruleCode: 'adipisicing', //单别代码
                    ruleName: 'ut dolor consectetur in', //单别名称
                    systemModel: 'do et cillum Excepteur culpa', //系统模块
                    task: 'proident quis consequat' //作业
                },
                {
                    id: 'pariatur proident',
                    noRule: 'labore est aliqua consequat',
                    ruleCode: 'labo',
                    ruleName: 'non',
                    systemModel: 'aliquip',
                    task: 'dolor'
                }
            ],
            checkTableRow: {},
            loading: false,
            pagination: {
                pageIndex: 1,
                pageSize: 10,
                pageTotal: 0
            },
            query: {
                ruleCode: '', //单别代码
                systemModel: '' //系统模块
            },
            //模块
            moList: [],
            //作业
            taskList: [],
            rules: {
                ruleCode: [
                    { required: true, message: '请输入币别', trigger: 'change' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'change' }
                ],
                systemModel: [{ required: true, message: '请选择', trigger: 'change' }],
                rate: [{ required: true, message: '请输入', trigger: 'change' }]
            },
            dialogVisible: false, //新增
            dialogVisibleEdit: false, //编辑科目
            ruleForm: {
                ruleCode: '', //单别代码
                ruleName: '', //单别名称
                systemModel: '', //系统模块
                task: '' //作业
            }, //新增model
            editForm: {}
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 200;
        this.pageTitle = this.$router.currentRoute.meta.title;
        //$refs.xTree.setAllTreeExpand(true);
    },
    methods: {
        handlePageChange({ currentPage, pageSize }) {
            this.pagination.pageIndex = currentPage;
            this.pagination.pageSize = pageSize;
            this.getData();
        },

        //点击单选方法
        currentChangeEvent({ row }) {
            this.checkTableRow = row;
            console.log('currentChangeEvent', this.checkTableRow);
        },
        getData() {
            this.loading = true;
            console.log('getData', this.loading);
            let params = {
                pageNo: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
                record: this.query
            };

            appMain
                .orderNoRuleFindAllPage(params)
                .then(res => {
                    if (res.data.code === 20000) {
                        //TODO 测试环境使用
                        this.timer = setTimeout(() => {
                            //设置延迟执行
                            this.tableData = res.data.data.list;
                            this.pagination.pageSize = res.data.data.pageSize;
                            this.pagination.pageIndex = res.data.data.pageNum;
                            this.pagination.pageTotal = res.data.data.total;
                            this.loading = false;
                        }, 300);

                        console.log('getData tableData', this.tableData);
                    } else {
                        this.loading = false;
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    this.loading = false;
                    console.log(err);
                });
        },
        goAdd() {
            //this.dialogVisible = true;
            this.$router.push({
                path: 'singleSetDetail'
            });
        },
        goEdit() {
            //this.$XModal.alert(this.checkTableRow.id);
            //this.$XModal.alert(JSON.stringify(this.$refs.xTree.getRadioRecord()));
            if (this.$refs.xTree.getRadioRecord() != null) {
                this.editForm = _.clone(this.$refs.xTree.getRadioRecord());
                // this.dialogVisibleEdit = true;
                this.$router.push({
                    path: 'singleSetDetail',
                    query: {
                        id: this.editForm.id
                    }
                });
            } else {
                this.$message.info('请选择一条记录,再进行编辑');
            }
        },
        addRate() {
            appMain
                .orderNoRuleInsert(this.ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.dialogVisible = false;
                        this.getData();
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        updateRate() {
            appMain
                .orderNoRuleUpdateById(this.editForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.dialogVisibleEdit = false;
                        this.getData();
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getMoList() {
            appMain
                .orderNoRuleFindModelOfNo()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.moList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getTaskList() {
            appMain
                .orderNoRuleFindTask()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.taskList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogVisible = false;
                    done();
                })
                .catch(_ => {});
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (formName == 'searchRuleForm') {
                        //新增科目
                        this.getData();
                    } else if (formName == 'ruleForm') {
                        this.addRate();
                    } else if (formName == 'editForm') {
                        this.updateRate();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    computed: {},
    watch: {
        dialogVisible(newValue, oldValue) {
            console.log('dialogVisible', newValue);
            if (newValue == false) {
                this.ruleForm = {
                    ruleCode: '', //单别代码
                    ruleName: '', //单别名称
                    systemModel: '', //系统模块
                    task: '' //作业
                };
                this.$refs['ruleForm'].resetFields();
                console.log('dialogVisible ruleForm', this.ruleForm);
            }
        }
    }
};
</script>

<style lang="css" scoped>
.el-card {
    height: 100%;
}

.flex-right {
    padding: 20px;
}

.handler-box {
    border: 1px solid rgb(232, 234, 236);
    padding: 5px;
    margin-bottom: 15px;
}

.tree-box .flex-left {
    padding: 0px !important;
}
</style>